<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 面包 -->

      <el-card shadow="never">

        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          id="Turnofpage"
          v-show="$route.query.id"
        >
          <!-- <el-breadcrumb-item :to="{ path: '/subjects/directorys' }">学科科目</el-breadcrumb-item> -->
          <el-breadcrumb-item>学科科目</el-breadcrumb-item>
          <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 标头第一行信息 -->
        <el-row>
          <el-form :inline="true">
            <el-col :span="8">
              <el-form-item
                label="目录名称"
                size="small"
              >
                <el-input v-model="please.directoryName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="digital">
              <el-form-item label="状态">
                <el-select
                  placeholder="请选择"
                  size="small"
                  v-model="state"
                >
                  <el-option
                    label="启用"
                    value="1"
                  ></el-option>
                  <el-option
                    label="停用"
                    value="0"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-button
                size="small"
                @click="removeitmf"
              >清除</el-button>
              <el-button
                size="small"
                type="primary"
                @click="listdirectorysearch"
              >搜索</el-button>
            </el-col>
            <el-col
              :span="3"
              v-show="$route.query.id"
            >
              <div id="search">
                <i class="el-icon-back"></i>
                <el-link
                  :underline="false"
                  type="primary"
                  @click="returndiscipline"
                >返回学科</el-link>
              </div>
            </el-col>
            <el-col :span="1">
              <el-button
                type="success"
                size="small"
                icon="el-icon-edit"
                @click="Popup"
              >新增目录</el-button>
            </el-col>

          </el-form>
        </el-row>
        <!-- 第二行灰色数据 -->
        <!-- title="数据一共条" -->
        <el-alert
          :closable="false"
          type="info"
          show-icon
        >
          数据一共{{counts}}条
        </el-alert>
        <!-- 表格信息 -->

        <el-table
          :data="listdata"
          size="medium"
          fit
          highlight-current-row
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column
            label="
          序号"
            type="index"
            align="left"
            width="70"
            :index="indexMethod"
          >
          </el-table-column>
          <el-table-column
            width="150"
            label="所属学科"
            align="center"
            prop="subjectName"
          ></el-table-column>
          <el-table-column
            label="目录名称"
            align="center"
            prop="directoryName"
          ></el-table-column>
          <el-table-column
            label="创建者"
            align="center"
            prop="username"
          ></el-table-column>
          <el-table-column
            label="创建日期"
            align="center"
            prop="addDate"
            :formatter="timechangestate"
          ></el-table-column>
          <el-table-column
            label="面试题数量"
            align="center"
            prop="totals"
          ></el-table-column>
          <el-table-column
            label="状态"
            align="center"
            prop="state"
            :formatter="changestate"
          ></el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            align="left"
            width="150"
            prop="state"
          >
            <!-- :disabled="row.state" -->
            <template #default="{row}">
              <el-button
                type="text"
                size="edium"
                @click="Buttonopen(row)"
              >{{row.state? "禁用" :"启用"}}</el-button>
              <el-button
                type="text"
                size="edium"
                :disabled="disabledata(row)"
                @click="Modifythe(row)"
              >修改</el-button>
              <el-button
                type="text"
                size="edium"
                :disabled="disabledata (row)"
                @click="deletelist(row)"
              >删除</el-button>

            </template>
          </el-table-column>
        </el-table>

        <!-- 分页信息 -->
        <el-pagination
          @size-change="handsizechange"
          @current-change="handcurrentchange"
          :current-page="please.page"
          :page-sizes="[10,20,30,40]"
          :page-size="please.pagesize"
          layout="total,prev,pager,next,sizes,jumper"
          background
          :total="counts"
        >

        </el-pagination>

      </el-card>
      <!-- 组件 -->
      <directorys-add
        ref="directorysadd"
        :visibles.sync="visiblesdata"
        :endid="endid"
        @updatalist="listdirectorys"
      > </directorys-add>
    </div>
  </div>
</template>

<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
import { list as directoryl, remove, changeState } from '@/api/hmmm/directorys'
import DirectorysAdd from '@/module-hmmm/components/directorys-add'
import dayjs from 'dayjs'

export default {
  name: 'Directorys',
  components: {
    DirectorysAdd
  },
  created () {
    getCompanys()
    getQuestion()

    if (this.$route.query.id) {
      this.listdirectorys(null, null, this.$route.query.id)
    } else {
      this.listdirectorys()
    }
  },
  computed: {
    digital () {
      return this.$route.query.id ? 11 : 14
    }
  },
  data () {
    return {
      // 列表数据
      listdata: [],
      please: {
        // 请求目录
        directoryName: '',
        // 当前页
        page: 1,
        // 请求数量
        pagesize: 10
      },
      // 总页数
      counts: 0,
      // // 学科id
      // subjectID: '',
      // // 目录名称
      // directoryName: '',
      // // 状态 1 开启 0 屏蔽
      // state: ''
      // 弹窗数据
      visiblesdata: false,
      disable: true,
      // 修改id
      endid: {},
      loading: false,
      // 请求状态
      state: ''
    }
  },
  methods: {
    // 列表数据的展示
    async listdirectorys (directoryName, state, subjectID) {
      this.loading = true
      const { data: res } = await directoryl({
        subjectID,
        directoryName,
        state,
        page: this.please.page,
        pagesize: this.please.pagesize
      })

      this.counts = res.counts

      this.listdata = res.items
      this.loading = false
    },
    indexMethod (index) {
      return (this.please.page - 1) * this.please.pagesize + index + 1
    },
    // 条数改变
    handsizechange (val) {
      this.please.pagesize = val
      // 渲染页面
      this.listdirectorys()
    },
    // 页数改变
    handcurrentchange (val) {
      this.please.page = val
      // 渲染页面
      this.listdirectorys()
    },
    // 点击新增出现弹窗
    Popup () {
      this.visiblesdata = true
    },
    // 点击删除
    deletelist (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示')
        .then(async () => {
          await remove(row)
          this.$message.success('删除成功')
          this.listdirectorys()
        })
        .catch(() => {
          this.$message.success('取消成功')
        })
    },
    // 按扭启用与禁用
    async Buttonopen (row) {
      if (row.state === 0) {
        this.$message.success('禁用成功')
        row.state = 1
      } else {
        row.state = 0
        this.$message.success('启用成功')
      }
      await changeState({ id: row.id, state: row.state })
    },
    // 改变状态启用与非启用
    changestate (row, column, cellValue, index) {
      if (cellValue === 1) {
        return '已启用'
      }
      if (cellValue === 0) {
        return '已禁用'
      }
    },
    // 点击修改
    Modifythe (row) {
      this.visiblesdata = true
      this.endid = row
      this.$nextTick(() => {
        this.$refs.directorysadd.Modifydata()
      })
    },
    // 可点击于不可点击属性
    disabledata (row) {
      if (row.state === 1) {
        return true
      } else {
        return false
      }
    },
    // 创建日期的调整
    timechangestate (row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD')
    },
    // 清除第一行搜索表单
    removeitmf () {
      this.please = {
        // 请求目录
        directoryName: '',
        // 当前页
        page: 1,
        // 请求数量
        pagesize: 10
      }
      this.state = ''
      this.listdirectorys()
    },
    // 搜索
    listdirectorysearch () {
      if (this.state === '') {
        this.listdirectorys(this.please.directoryName)
      } else {
        this.listdirectorys(this.please.directoryName, this.state)
      }
    },
    // 返回学科
    returndiscipline () {
      this.$router.push('/subjects/list')
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 10px;
}
.el-alert {
  height: 35px;
  margin-bottom: 10px;
  border-radius: 5px;
  font-size: 30px;
  line-height: 18px;
}
::v-deep .el-alert .el-alert__description {
  font-size: 14px;
  line-height: 35px;
}

::v-deep .el-alert__icon.is-big {
  font-size: 16px;
}
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
#search {
  // line-height: 30px;
  // text-align: center;
  width: 100px;
  height: 18px;
  // background-color: pink;
  position: relative;
  top: 8px;
  left: 40px;
  i {
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    color: #409eff;
  }

  samp {
    color: #409eff;
    // font-size: 1em;
    // font-family: monospace, monospace;

    font-size: 16px;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }
}
#Turnofpage {
  height: 33px;
  width: 100%;
  position: relative;
  top: -11px;
  left: -10px;

  margin: 8px;
  border-bottom: 2px solid #ebeef5;
  // border: 1px solid #409eff;
}
</style>
